<template>
  <el-dialog title="修改设备" :visible.sync="editdialog" width="40%" :before-close="cancel">
    <template>
      <el-form ref="ruleForm" :model="orderForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="机器编号:">
          <span> {{ currentInfo.innerCode }}</span>
        </el-form-item>
        <el-form-item label="供货时间:">
          <span> {{ currentInfo.lastSupplyTime.replaceAll('-', '.').replaceAll('T', ' ') }}</span>
        </el-form-item>
        <el-form-item label="设备类型:">
          <span> {{ currentInfo.typename }}</span>
        </el-form-item>
        <el-form-item label="设备容量:">
          <span> {{ currentInfo.type.channelMaxCapacity }}</span>
        </el-form-item>
        <el-form-item label="选择型号">
          <el-select v-model="orderForm.nodeId" placeholder="请选择" style="width:100%">
            <el-option
              v-for="item in currentPageRecords"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="合作商:">
          <span> {{ currentInfo.ownerName }}</span>
        </el-form-item>
        <el-form-item label="所属区域:">
          <span> {{ currentInfo.region.name }}</span>
        </el-form-item>
        <el-form-item label="设备地址:">
          <span> {{ currentInfo.typeStr }}</span>
        </el-form-item>
        <div class="button">
          <div>
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="editdorder">确 定</el-button>
          </div>
        </div>
      </el-form>
    </template>
  </el-dialog>
</template>

<script>
import { vmnodeAPI, vmNodeAPI } from '@/api/vm'
export default {
  props: {
    editdialog: {
      type: Boolean,
      default: false
    },
    currentInfo: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      orderForm: {
        nodeId: ''
      },
      currentPageRecords: []
    }
  },
  created() {
    this.getvmnode()
  },
  methods: {
    async getvmnode() {
      const res = await vmnodeAPI()
      this.currentPageRecords = res.data.currentPageRecords
    },
    cancel() {
      this.$emit('update:editdialog', false)
      this.$refs.ruleForm.resetFields()
    },
    async editdorder() {
      try {
        await vmNodeAPI(this.currentInfo.id, this.orderForm.nodeId)
        this.$message.success('修改成功')
        this.$emit('update:editdialog', false)
      } catch (error) {
        this.$message.error('该设备正在运行')
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
    margin-left: 100px;
}

.el-form {
    .button {
        display: flex;
        justify-content: center;
    }
}
</style>
